<template>
  <div
    v-if="curComponent==='table'"
    class="table"
  >
    <x-card v-if="hasPerm('foodStore:page')">
      <div
        slot="content"
        class="table-page-search-wrapper"
      >
        <a-form layout="inline">
          <a-row :gutter="20">
            <a-col
              :md="7"
              :sm="24"
            >
              <a-form-item label="搜索">
                <a-input
                  v-model="queryParam.PlanName"
                  allow-clear
                  placeholder="请输入食谱名称"
                />
              </a-form-item>
            </a-col>
            <a-col
              :md="7"
              :sm="24"
            >
              <a-button
                type="primary"
                @click="$refs.table.refresh(true)"
              >查询
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </x-card>
    <a-card :bordered="false">
      <s-table
        v-if="flag"
        ref="table"
        :columns="columns"
        :data="loadData"
        :rowKey="(record) => record.id"
        bordered
      >
        <template
          slot="operator"
          v-if="hasPerm('foodStore:add')"
        >
          <a-button
            icon="plus"
            type="primary"
            @click="curComponent='DefineDietPlan',curState='add'"
          >新增
          </a-button>
        </template>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            v-if="hasPerm('foodStore:edit')"
            @click="curComponent='DefineDietPlan',curState='detail',baseInfo={id:record.id,planName:record.planName,planRange:record.planRange,startTime:record.starTime}"
          >详情</a>
          <a-divider
            v-if="hasPerm('cookbookStore:edit') & hasPerm('cookbookStore:delete')"
            type="vertical"
          />
          <a
            v-if="hasPerm('foodStore:edit')"
            @click="curComponent='DefineDietPlan',curState='edit',baseInfo={id:record.id,planName:record.planName,planRange:record.planRange,startTime:record.starTime}"
          >修改</a>
          <a-divider
            v-if="hasPerm('cookbookStore:edit') & hasPerm('cookbookStore:delete')"
            type="vertical"
          />
          <a-popconfirm
            v-if="hasPerm('cookbookStore:delete')"
            placement="topRight"
            title="确认删除？"
            @confirm="handleDelete(record.id)"
          >
            <a>删除</a>
            <a-divider
              v-if="hasPerm('cookbookStore:edit') & hasPerm('cookbookStore:delete')"
              type="vertical"
            />
            <a
              v-if="hasPerm('foodStore:edit')"
              @click="curComponent='purchasingList',curState='DayPurchase',baseInfo={id:record.id}"
            >周需求量</a>
          </a-popconfirm>
        </span>
      </s-table>
    </a-card>
  </div>
  <component
    v-else
    :is="curComponent"
    @change-to-table="curComponent='table'"
    :state="curState"
    :baseInfo="baseInfo"
  />
</template>

<script>
import DefineDietPlan from "@/views/dietPlan/DefineDietPlan";
import purchasingList from '@/views/dietPlan/purchasingList.vue'
import { STable, XCard } from "@/components";
import { deleteDietPlanApi, dietPlanListApi } from "@/api/modular/dietPlan";

export default {
  name: "DietPlan",
  components: {
    purchasingList,
    DefineDietPlan,
    STable,
    XCard
  },
  data() {
    return {
      flag: true,
      // 查询参数
      queryParam: {
        PlanName: undefined
      },
      // 表头
      columns: [
        {
          title: "计划食谱名称",
          dataIndex: "planName"
        },
        {
          title: "食谱周期",
          dataIndex: "planRange"
        },
        {
          title: "操作",
          scopedSlots: { customRender: "action" }
        }
      ],
      loadData: parameter => {
        return dietPlanListApi(Object.assign(parameter, this.queryParam)).then((res) => {
          if (res.data.rows.length) {
            return res.data;
          }
        });
      },
      curComponent: "table",
      curState: "add",
      baseInfo: ""
    };
  },
  created() {
  },
  methods: {
    async handleDelete(id) {
      this.flag = false;
      await deleteDietPlanApi({ planweekrecipesId: id });
      this.flag = true
    }
  },
};
</script>

<style>

</style>